<template>
  <div style="width: 1200px;margin: 0 auto;">
    <div style="line-height: 110px;font-size: 35px;">订单确认</div>

    <el-card style="height: 1000px;margin-bottom: 70px" >
      <div style="padding: 34px;font-size: 20px;">
        <div style="line-height: 55px;margin-bottom: 10px;">订单信息</div>
        <div style="padding: 20px;height: 125px;margin: 0;background: #f3f5f7;">
          <div style="float: left">
            <img :src="course.imgurl" style="height: 125px">
          </div>
          <div style="float: left;padding-left: 20px;color: #666;line-height: 1.3;">{{course.title}}</div>
        </div>

        <div style="border-bottom: 1px solid #d9dde1;margin: 40px 0;"></div>

        <div style="margin: 0;padding: 0;border: 0;outline: 0;">
          <div style="height: 50px">
            <div style="float: left;font-size: 16px;">优惠券<span> 已选0张</span></div>
            <div style="float: right;background: #fc6a70;padding: 3px 8px;color: #fff;font-size: 16px;border-radius: 3px;">无优惠券 </div>
          </div>
        </div>

        <div style="border-bottom: 1px solid #d9dde1;margin: 40px 0;"></div>
        <div style="height: 115px">
          <div style=" float: left;font-size: 15px;padding: 20px 0 0 0;">
            <input type="checkbox" style="width: 15px;height: 15px;vertical-align: top;">同意
            <a href="" style="text-decoration: none;color: #328ff7;">课程服务协议</a>
          </div>
          <div style="float: right;font-size: 16px;">
            <div>
              <p style="margin-bottom: 10px;">商品金额:<span style="color: #ff0000;">{{course.oldprice}}</span></p>
              <p style="text-align: right;margin-bottom: 20px;color: #ff0000;">优惠券:-<span>0</span></p>
            </div>
            应付金额:<span style="font-size: 25px;color: red">{{course.paymentprice}}</span>
          </div>
        </div>

        <div style="margin-top: 35px;margin-bottom: 70px;text-align: right;">
          <button @click="pay(course.id)" style="width: 140px;line-height: 38px;color: #fff;font-size: 16px;background: #1a8bc1;border: none;">立即支付</button>
        </div>
      </div>

    </el-card>
  </div>

  <div v-html="from"></div>

</template>

<script setup>
import qs from "qs";
import {onMounted, ref} from "vue";
import axios, {post} from "axios";


const list = ref([])
const course = ref({
  id:'',
  title:'',
  oldprice:'',
  paymentprice:'',
  imgurl:''
})

const selectCourseById = () => {
  let id = getQueryParameter('id');
  console.log(id);
  axios.get(BASE_URL+"8080/v1/course/findById/"+id).then((resp)=>{
    if (resp.data.code==2000){
      console.log(resp.data.data);
      course.value = resp.data.data;
    }
  })

}

const getQueryParameter = (name, url = window.location.href) =>{
  name = name.replace(/[\[\]]/g, "\\$&");
  let regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
      results = regex.exec(url);
  if (!results) return null;
  if (!results[2]) return '';
  return decodeURIComponent(results[2].replace(/\+/g, " "));
}

const from = ref('');

const pay = (outTradeNo) => {
  console.log(outTradeNo)
  axios.get(BASE_URL+"8888/alipay/pay?outTradeNo="+outTradeNo).then((resp)=>{
    console.log(resp)
    from.value = resp.data;
  })
}
onMounted(()=>{
  selectCourseById();
})

</script>


<style scoped>

</style>